<template>
  <div>
    <div class="help-head">
      <h2>帮助中心</h2>
      <p>点击查看帮助内容</p>
    </div>
    <div class="help-cont">
      <van-collapse v-model="activeNames">
        <van-collapse-item class="h-item" title="1.关于绑定银行卡" name="1">
          <span>输入银行卡之前，请查看银行卡列表，避免办卡失败</span>
        </van-collapse-item>
        <van-collapse-item class="h-item" title="2.关于提升借款额度" name="2">
          <span
            >平台承诺：所有首次申请并按时还款的用户，借款额度可提升，还款周期和相关资费根据您具体信用进行优化</span
          >
        </van-collapse-item>
        <van-collapse-item
          class="h-item"
          :title="info && info.contTitle"
          name="3"
        >
          <span>{{ info && info.content }}</span>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { settingInfo } from '@/api/index'
export default {
  data() {
    return {
      activeNames: ['1'],
      info: null
    }
  },
 created() {
    this.$nextTick ( async()=>{
      this.info = await settingInfo()
    })
  }
}
</script>

<style lang="less" scoped>
.help-head {
  background: #444444;
  padding: 30px 20px 40px 20px;
  h2 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
  }
  p {
    font-size: 14px;
    color: #fff;
  }
}
.help-cont {
  position: relative;
  top: -20px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding-top: 20px;
  ::v-deep .van-hairline--top-bottom::after,
  .van-hairline-unset--top-bottom::after {
    border-width: 0;
  }
}
</style>